let myChart = echarts.init(document.getElementById('main'));
let option = {
  title: {
    text: '皮肤销售一览表'
  },
  tooltip: {},
  legend: {
    data: ['销量']
  },
  xAxis: {
    data: ['破局者', '归虚梦演', '特工魅影', '据霜思', '画中仙', '浮生妄', '末日机甲']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [380, 240, 436, 159, 327, 429, 658]
    }
  ]
};
myChart.setOption(option);
const spImgs = document.querySelectorAll('.second-part .div1 img')
const spps = document.querySelectorAll('.second-part .div1 p')
for (let i = 0; i < spImgs.length; i++) {
  spImgs[i].addEventListener('mouseenter', function () {
    spImgs[i].style.opacity = 1
    spps[i].classList.add('active')
    spps[i].innerHTML = `${spImgs[i].title}<br>皮肤售价:${spImgs[i].dataset.price}点券`
  })
}
for (let i = 0; i < spImgs.length; i++) {
  spImgs[i].addEventListener('mouseleave', function () {
    spps[i].classList.remove('active')
    spImgs[i].style.opacity = 0.8
  })
}
let arr = []
const spIs = document.querySelectorAll('.second-part i')
const tbody = document.querySelector('tbody')
const allPrice = document.querySelector('table .all-price')
const checkAll = document.querySelector('.checkAll')
let money = 0
for (let i = 0; i < spIs.length; i++) {
  spIs[i].addEventListener('click', function () {
    const borther = this.previousElementSibling
    const spobj = {
      goods: `${borther.title}`,
      price: `${+(borther.dataset.price) / 10}`
    }
    arr.push(spobj)
    render()
  })
}
function render() {
  tbody.innerHTML = ''
  for (let i = 0; i < arr.length; i++) {
    const tr = document.createElement('tr')
    tr.innerHTML =
      `
      <td><input type="checkbox" name="check" class="check"></td>
      <td>${arr[i].goods}</td>
      <td>￥${arr[i].price}</td>
      <td><a href = 'javascript:' data-id=${i}>删除</a></td>
    `
    tbody.appendChild(tr)
    choose()
  }
}
tbody.addEventListener('click', e => {
  if (e.target.tagName === 'A') {
    arr.splice(e.target.dataset.id, 1)
    render()
  }
})
function choose() {
  const checks = document.querySelectorAll('.check')
  checkAll.addEventListener('click', function () {
    for (let i = 0; i < checks.length; i++) {
      checks[i].checked = checkAll.checked
    }
    cost()
  })
  for (let i = 0; i < checks.length; i++) {
    checks[i].addEventListener('click', function () {
      checkAll.checked = (document.querySelectorAll('.check:checked').length === checks.length)
      cost()
    })
  }
}
function cost() {
  const checks = document.querySelectorAll('.check')
  for (let i = 0; i < checks.length; i++) {
    if (checks[i].checked) {
      money += +arr[i].price
    }
  }
  allPrice.innerHTML = `￥${money}`
  money = 0
}
function getRandom(M, N) {//开始倒计时
  return Math.floor(Math.random() * (M - N + 1)) + N
}
function getColor() {
  const n1 = getRandom(255, 0)
  const n2 = getRandom(255, 0)
  const n3 = getRandom(255, 0)
  return `rgb(${n1},${n2},${n3})`
}
const color = getColor()
const spDiv1 = document.querySelector('.second-part .miaosha .div2')
spDiv1.style.backgroundColor = color
function djs() {
  const oldTime = +new Date()
  const newTime = +new Date('2023-11-20 21:00:00')
  const Time = (newTime - oldTime) / 1000
  let d = parseInt(Time / 60 / 60 / 24)
  let h = parseInt(Time / 60 / 60 % 24)
  if (d > 0) {
    h = d * 24 + h
  }
  if (h < 10) {
    h = '0' + h
  }
  let m = parseInt(Time / 60 % 60);
  if (m < 10) {
    m = '0' + m
  }
  let s = parseInt(Time % 60)
  if (s < 10) {
    s = '0' + s
  }
  const s1 = document.querySelector('.s1')
  const s2 = document.querySelector('.s2')
  const s3 = document.querySelector('.s3')
  s1.innerHTML = `${h}`
  s2.innerHTML = `${m}`
  s3.innerHTML = `${s}`
}
djs()
setInterval(djs, 1000)
const body = document.body;
const printArea = document.querySelector('.third-part')
const dayin = document.querySelector('.print')
dayin.addEventListener('click', function () {
  let originalContent = body.innerHTML
  body.innerHTML = printArea.innerHTML
  window.print()
  body.innerHTML = originalContent
})